<template>
  <div class="amap-layer flex">
    <!-- <div id="tree-main" class="tree-main">
      <a-table :dataSource="dataSource" :columns="columns" size="small" :scroll="{ y: tableHeight }" :pagination="false">
        <template v-slot:bodyCell="{ column, record }">
          <template v-if="column.dataIndex == 'action'">
            <a @click="onDetail(record)">查看</a>
          </template>
        </template>
      </a-table>
    </div> -->
    <div class="graph">
      <ul>
        <li class="flex">
          <i class="ico"></i>
          <span>布防</span>
        </li>
        <li class="flex">
          <i class="ico"></i>
          <span>撤防</span>
        </li>
        <li class="flex">
          <i class="ico"></i>
          <span>离线</span>
        </li>
      </ul>
    </div>
    <div id="amap"></div>
  </div>
  <a-modal v-model:visible="visible" title="点位详情" :footer="false" class="amap-modal" :width="697" centered>
    <div class="p-4">
      <div class="flex items-center info">
        <p class="item flex items-center">
          <span>水厂名称</span>
          <span>XXXXXXX提升水厂</span>
        </p>
        <p class="item flex items-center">
          <span>水厂类型</span>
          <span>XXXXXXX提升水厂</span>
        </p>
      </div>
      <div class="flex info">
        <p class="item flex items-center">
          <span>水厂类型</span>
          <span>XXXXXXX提升水厂</span>
        </p>
      </div>
      <div class="flex items-center info">
        <p class="item flex items-center">
          <span>水厂联系人</span>
          <span>XXXXXXX提升水厂</span>
        </p>
        <p class="item flex items-center">
          <span>联系方式</span>
          <span>XXXXXXX提升水厂</span>
        </p>
      </div>
      <a-divider />
      <p class="tip">设备情况</p>
      <div class="flex items-center justify-between">
        <div class="flex">
          <span>视频监控设备</span>
          <strong>X个</strong>
        </div>
        <div class="flex">
          <span>环境监控设备</span>
          <strong>X个</strong>
        </div>
        <div class="flex">
          <span>安防监控设备</span>
          <strong>X个</strong>
        </div>
      </div>
      <div class="flex items-center justify-center">
        <a-button type="primary">短信下发</a-button>
        <a-divider type="vertical" />
        <a-button>误报</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { ref, onMounted, onUnmounted, defineComponent } from 'vue';
import { stationListApi } from '/@/api/station';
import poiMarkerDefault from '/@/assets/images/poi-marker-default.png';
import { useGo } from '/@/hooks/web/usePage';
import * as turf from '@turf/turf';
import ajax from '@/utils/request-oss-xml.js';
export default defineComponent({
  setup() {
    const go = useGo();

    let visible = ref(false);

    let amap = null;

    let markerArray = [];

    let dataSource = ref([]);

    let columns = ref([
      {
        title: '名称',
        align: 'center',
        dataIndex: 'name',
      },
      {
        title: '状态',
        align: 'center',
        dataIndex: 'status',
      },
      {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        width: 70,
      },
    ]);

    let tableHeight = ref(0);

    /**
     * 初始化地图
     */
    function initMap() {
      amap = new AMap.Map('amap', {
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        //地图中心点
        center: [113.29, 22.81],
        //地图显示的缩放级别
        zoom: 14,
        // zooms: [10, 12],
        // pitch: 1,
        // 选装
        rotation: 0,
      });
      // setMapStyle('darkblue');
      // let treeMain = document.getElementById('tree-main');
      // tableHeight.value = treeMain.offsetHeight - 40 + 'px';
      // window.onresize = () => {
      //   tableHeight.value = treeMain.offsetHeight - 40 + 'px';
      // };
      // 初始化点位
      initStationList();
    }

    /**
     * 设置图层样式
     */
    function setMapStyle(v) {
      let styleName = 'amap://styles/' + v;
      amap.setMapStyle(styleName);
    }

    /**
     * 初始化站点列表
     */
    function initStationList() {
      markerArray.map((_) => {
        amap.remove(_);
      });
      let points = [];
      stationListApi({}).then((list) => {
        dataSource.value = list;
        for (let i = 0; i < list.length; i++) {
          let { name, longitue, latitude, state } = list[i];
          if (longitue > 0 && latitude > 0) {
            points.push(turf.point([longitue, latitude]));
          }
          let className = 'marker-status';
          switch (state) {
            case -1:
              className = 'marker-status-offline';
              break;
            case 0:
              className = 'marker-status-safang';
              break;
            case 1:
              className = 'marker-status-bufang';
              break;
          }
          if (longitue && latitude) {
            let marker = new AMap.Marker({
              position: new AMap.LngLat(longitue, latitude),
              title: name,
              ...list[i],
              offset: new AMap.Pixel(0, 0),
              // 自定义覆盖物
              content: '<div class="marker ' + className + '"></div>',
            });
            marker.setLabel({
              direction: 'right',
              // 设置文本标注偏移量
              offset: new AMap.Pixel(10, 0),
              // 设置文本标注内容
              content: `<div class='marker-info'>${name}</div>`,
              ...list[i],
            });
            marker.on('click', ({ target }) => {
              let { _originOpts } = target;
              onDetail(_originOpts);
            });
            markerArray.push(marker);
            amap.add(marker);
          }
        }
        let features = turf.featureCollection(points);
        let [lng, lat] = turf.center(features).geometry.coordinates;
        amap.setCenter([lng, lat]);
        amap.setZoom(10);
      });
    }

    function onDetail({ id }) {
      // go(`/water/station/device?id=${id}`);
    }

    /**
     * 设置顺德边界
     */
    function initShundePolygon() {
      Promise.all([
        ajax.get({ path: 'beijiao.json' }),
        ajax.get({ path: 'chencun.json' }),
        ajax.get({ path: 'daliang.json' }),
        ajax.get({ path: 'junan.json' }),
        ajax.get({ path: 'lecong.json' }),
        ajax.get({ path: 'leliu.json' }),
        ajax.get({ path: 'longjiang.json' }),
        ajax.get({ path: 'lunjiao.json' }),
        ajax.get({ path: 'ronggui.json' }),
        ajax.get({ path: 'xingtan.json' }),
      ]).then((res) => {
        let m = res;
        for (let i = 0; i < m.length; i++) {
          let coordinates = m[i].coordinates;
          let polygons = [];
          amap.remove(polygons);
          for (let i = 0; i < coordinates.length; i++) {
            let polygon = new AMap.Polygon({
              path: coordinates[i],
              strokeWeight: 3,
              fillColor: '',
              fillOpacity: 0.4,
              strokeColor: '#039567',
              strokeOpacity: 0.85,
            })
              .on('mousemove', (e) => {
                polygon.setOptions({
                  strokeStyle: 'solid',
                  strokeColor: '#039567',
                });
              })
              .on('mouseout', (e) => {
                polygon.setOptions({
                  strokeStyle: 'dashed',
                  strokeColor: '#039567',
                });
              });

            amap.add(polygon);
            polygons.push(polygon);
          }
        }
      });
    }

    onMounted(() => {
      initMap();
      // initShundePolygon();
    });

    onUnmounted(() => {
      amap && amap.destroy();
    });

    return {
      initMap,
      visible,
      dataSource,
      columns,
      tableHeight,
      onDetail,
      initStationList,
    };
  },
});
</script>

<style lang="less" scoped>
.amap-layer {
  position: relative;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  flex: 1;
  .tree-main {
    width: 300px;
  }
  .graph {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    z-index: 100;
    ul {
      padding: 0;
      margin: 0;
      li {
        margin: 0 0 12px;
        &:first-child {
          .ico {
            background: green;
          }
        }
        &:nth-child(2) {
          .ico {
            background: red;
          }
        }
        &:last-child {
          margin: 0;
          .ico {
            background: gray;
          }
        }
        .ico {
          display: block;
          width: 20px;
          height: 20px;
          background: #fff;
          border-radius: 50%;
          margin: 0 12px 0 0;
          &.active {
            background-color: #007aff;
          }
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
  #amap {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    :deep(.marker) {
      position: relative;
      display: block;
      width: 18px;
      height: 18px;
      outline: none;
      box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
      border-radius: 100%;
      transform-origin: 0 0;
      opacity: 0.7;
      &.marker-status {
        background: blue;
      }
      &.marker-status-bufang {
        background: green;
      }
      &.marker-status-safang {
        background: red;
      }
      &.marker-status-offline {
        background: gray;
      }
    }
  }
}
.amap-modal {
  .ant-modal-close {
    .ant-modal-close-x {
      width: 27px;
      height: 27px;
      margin: 9px 20px;
      background: url('@/assets/images/img-16.png') no-repeat;
      cursor: pointer;
      .anticon {
        display: none;
      }
    }
  }
  .ant-modal-header {
    padding: 14.5px 40px;
    background: url('@/assets/images/img-15.png') no-repeat;
    background-size: 100% 100%;
    .ant-modal-title {
      color: #fff;
    }
  }
  .ant-modal-body {
    .info {
      margin: 0 0 12px;
      &:first-child,
      &:nth-child(3) {
        .item {
          &:first-child {
            margin: 0 50px 0 0;
          }
        }
      }
      .item {
        margin: 0;
        span {
          display: flex;
          &:first-child {
            width: 100px;
          }
        }
      }
    }
    .ant-divider {
      margin: 12px 0;
    }
    .tip {
      margin: 0 0 6px;
      font-family: '思源黑体';
      font-size: 16px;
      color: rgba(56, 56, 56, 1);
    }
    .ant-btn {
      width: 150px;
      height: 35px;
      margin: 38px 0 0;
      border-radius: 4px;
      border: none;
      &:first-child {
        margin: 38px 38.5px 0 0;
      }
      &:last-child {
        margin: 38px 0 0 38.5px;
        background: rgba(255, 141, 26, 1);
        color: #fff;
      }
    }
  }
}
</style>